<html>
  <head>
     
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   
    <style>
 
/* 
    Document   : estilos
    Created on : 01/31/2013, 04:42:27 PM
    Author     : Jose Miguel de Jesus <josejm07@hotmail.com>
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

form label  {

    background-color: #0066CC ;
    border-radius: 2px 2px 2px 2px;
    color: white;
    font-weight: bold;
    margin-left: 8px;
    margin-top: -3px;
    padding: 6px 12px;
    
        
}


        #h4-titulo
    {
        display: block;
        text-align: center;
        background-color: #06B014 ;
        color: white;
        font-weight: bold;
        border-radius: 2px 2px 2px 2px;
        padding: 6px 12px;
    }


.error:before {
    border-color: transparent #BC1010 transparent transparent;
    border-style: solid;
    border-width: 8px;
    content: "";
    left: -16px;
    position: absolute;
    top: 5px;
}
.error {
    background-color: #BC1010;
    border-radius: 4px 4px 4px 4px;
    color: white;
    font-weight: bold;
    margin-left: 16px;
    margin-top: -5px;
    padding: 6px 12px;
    position: absolute;
}   
         
         
input[type='text'], select {
	width:20%;
	border:1px solid #E5E5E5;
	-moz-border-radius:4px;
	border-radius:4px;
	height:20px;
	padding:2px;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	float:left;
}
input[type='text']:focus, select:focus {
	width:20%;
	border:1px solid #4CBAE5;
	-moz-border-radius:4px;
	border-radius:4px;
	height:20px;
	padding:2px;
	background-color:#D1F0FF;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	float:left;
}
.boton{
    
   margin-left: 180px;
    
}

#content
{
    height:700px  !important;
}
      
        #contenido{
         
             width: 200px;
             margin: 5px;
             margin-top: -15px;
             float:left;
             margin-left: -40px;
             width: 425px; 
             height: 100px;
             padding: 5px;
        }    
        
        #hcss{
               font-size: 12px; 
               margin: 0;
               padding: 5px;
               font-family: arial;
        }    
        
        
        tr{
            
            
            font-family:  arial;
            font-size: 12px;
           
            
              margin: 0;
              padding: 5px;
        }    


label { display:block; margin:5px 10px 3px 0; width:20%; float:left; text-align:left; font-weight: bold;}
#contenido-formulario-c24h {width:250px;}
.formulario-c24h {width:100%; margin:10px 0 10px 10px; }
</style>
    
    <script>
 
 $(document).ready(function () {
    var emailreg = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
    $(".boton").click(function (){
        $(".error").remove();
        if( $(".fdesde").val() == "" ){
            $(".fdesde").focus().after("<span class='error'>Ingrese La Fecha</span>");
            return false;
        }else if( $(".fhasta").val() == ""){
            $(".fhasta").focus().after("<span class='error'>Ingrese La Fecha</span>");
            return false;
        }
    });
});
    
    </script>
    
    
     <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', ''],
          ['Excelente', <?php echo $count['pt_satisfaccion']['Excelente']; ?>],
          ['Muy Bueno',<?php echo $count['pt_satisfaccion']['Muy Bueno']; ?>],
          ['Bueno', <?php echo $count['pt_satisfaccion']['Bueno']; ?>],
          ['Regular',  <?php echo $count['pt_satisfaccion']['Regular']; ?>],
          ['Deficiente',<?php echo $count['pt_satisfaccion']['Deficiente']; ?>]
        ]);

        var options = {
          title: '¿Como califica el nivel de satisfaccion de nuestro servicio?'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
        chart.draw(data, options);
      }
    </script>
    
 <script type="text/javascript" >
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', ''],
          ['Excelente',<?php echo $count['pt_tiempo']['Excelente']; ?>],
          ['Muy Bueno',<?php echo $count['pt_tiempo']['Muy Bueno']; ?>],
          ['Bueno',  <?php echo $count['pt_tiempo']['Bueno']; ?>],
          ['Regular', <?php echo $count['pt_tiempo']['Regular']; ?>],
          ['Deficiente',<?php echo $count['pt_tiempo']['Deficiente']; ?>]
        ]);

        var options = {
          title: '¿Como califica el cumplimiento del tiempo ofrecido?',    
           width:380,
           height:250
        };


        var chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
     
        chart.draw(data, options);
      }
    </script>
    
 <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', ''],
         ['Excelente',<?php echo $count['pt_calidad']['Excelente']; ?>],
          ['Muy Bueno',<?php echo $count['pt_calidad']['Muy Bueno']; ?>],
          ['Bueno',<?php echo $count['pt_calidad']['Bueno']; ?>],
          ['Regular',<?php echo $count['pt_calidad']['Regular']; ?>],
          ['Deficiente',<?php echo $count['pt_calidad']['Deficiente']; ?>]
        ]);

        var options = {
          title: '¿Como califica el nivel de calidad del servicio adquirido?'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div3'));
        chart.draw(data, options);
      }
    </script>
    
 <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', ''],
          ['Excelente',<?php echo $count['pt_cortesia']['Excelente']; ?>],
          ['Muy Bueno',<?php echo $count['pt_cortesia']['Muy Bueno']; ?>],
          ['Bueno',<?php echo $count['pt_cortesia']['Bueno']; ?>],
          ['Regular',<?php echo $count['pt_cortesia']['Regular']; ?>],
          ['Deficiente',<?php echo $count['pt_cortesia']['Deficiente']; ?>]
        ]);

        var options = {
          title: '¿Como califica la cortesia y amabilidad de nuestro equipo?'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div4'));
        chart.draw(data, options);
      }
    </script>

     <script>
$(function() {
//$( "#fhasta" ).datepicker();
 $('#fhasta').datepicker({dateFormat:'yy-mm-dd'});
});
</script>

<script>
$(function() {
//$( "#fdesde" ).datepicker();
 $('#fdesde').datepicker({dateFormat:'yy-mm-dd'});
});
</script>

  </head>
  <body>
 <h3 id="h4-titulo">Graficos KPIS Satisfaccion</h3>   <br>
      <?php
      //sumatoria de excelente
    $encuestaGeneral['Excelente'] = $count['pt_satisfaccion']['Excelente'];
    $encuestaGeneral['Excelente'] = $encuestaGeneral['Excelente'] + $count['pt_tiempo']['Excelente'];
    $encuestaGeneral['Excelente'] = $encuestaGeneral['Excelente'] + $count['pt_calidad']['Excelente'];;
    $encuestaGeneral['Excelente'] = $encuestaGeneral['Excelente'] + $count['pt_cortesia']['Excelente'];
    
    //sumatoria de muy bueno
    $encuestaGeneral['Excelente'] = $encuestaGeneral['Excelente'] + $count['pt_satisfaccion']['Muy Bueno'];
    $encuestaGeneral['Excelente'] = $encuestaGeneral['Excelente'] + $count['pt_tiempo']['Muy Bueno'];
    $encuestaGeneral['Excelente'] = $encuestaGeneral['Excelente'] + $count['pt_calidad']['Muy Bueno'];;
    $encuestaGeneral['Excelente'] = $encuestaGeneral['Excelente'] + $count['pt_cortesia']['Muy Bueno'];
      
    //sumatoria de bueno    
    $encuestaGeneral['Deficiente'] = $count['pt_satisfaccion']['Bueno'];
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_tiempo']['Bueno'];
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_calidad']['Bueno'];;
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_cortesia']['Bueno'];    
    
    //sumatoria de regular
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_satisfaccion']['Regular'];
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_tiempo']['Regular'];
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_calidad']['Regular'];;
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_cortesia']['Regular']; 
    
     //sumatoria de deficiente
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_satisfaccion']['Deficiente'];
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_tiempo']['Deficiente'];
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_calidad']['Deficiente'];;
    $encuestaGeneral['Deficiente'] = $encuestaGeneral['Deficiente'] + $count['pt_cortesia']['Deficiente']; 
        
      ?>
   
      
      
</head>

<body>

<div id="contenido-formulario-c24h" style="width:  900px; height: 150px;  "> 
	<form  id="formulario" METHOD=POST ACTION="<?php echo site_url() ?>/datocliente/grafico/">
	
            <div id="fecha" style=" width: 400px; height: 75px; float: left; ">
            
        <div class="formulario-c24h">
        <label >Fecha desde:</label>
        <input type="text" name="fdesde" class="fdesde" id="fdesde" />
         <div style="clear:both;"></div>
        </div>
            
        <div class="formulario-c24h">
        <label >Fecha Hasta:</label>
        <input type = "text"  name="fhasta" class="fhasta" id="fhasta" />
         <div style="clear:both;"></div>
        </div> </div> <br> 
        
        <div id ="contenido" >
        
       
 
             <?php
             
             /* Combercion de fechas americana 2013-01-01 a europea 01-01-2013 
              */
             $fdesde = date("d-m-Y",strtotime($count['fechas']['fdesde']));
             
             $fhasta = date("d-m-Y",strtotime($count['fechas']['fhasta']));
             
             ?>
             
            <table border="1" id="tabla">
                
                <tr style=" background-color: #0066CC; text-align: center; color: white; ">

<td ><h2 id="hcss">Detalle</h2></td>
<td><h2 id="hcss">Fecha Desde</h2></td>
<td><h2 id="hcss">Fecha Hasta</h2></td>
<td><h2 id="hcss">Total:</h2></td>
</tr>


<tr style=" text-align: center; " >
<td><h3 id="hcss">Encuestas En Las Fechas De:</h3></td>
<td><?php echo $fdesde;?> </td>
<td><?php echo $fhasta;?></td>
<td><?php echo $count['encuestas']['fecha'] ?></td>
</tr>

<tr style=" text-align: center; ">

<td  ><h3 id="hcss">Cantidad De Encuestas Totales:</h3></td>
<td>13-02-2013</td>
<td><?php echo date('d-m-Y'); ?></td>
<td><?php echo $count['loadAll']['count'] ?></td>
</tr>

</table> 
             
         </div><br><br> 
        
        <div id="boton" style=" float: left; height:40px; width: 180px;  margin-left: 25px; margin-top: -10px; ">
       <input id="botonSubmit" style="background-color: #06B014" name="botonSubmit" type="submit" class='boton' value="Enviar información">
       </div>
</form>
       </div>
   
    
    <br><br><br>
      <div id="cont_div1"  style="width: 900px; height: 700px;">
      <div id="chart_div1" style="width: 380px; height: 250px; float: left; "></div>
      <div id="chart_div2" style="width: 380px; height: 250px; float: left; " ></div>
     
      <div id="chart_div3" style="width: 380px; height: 250px; float: left; "></div>
      <div id="chart_div4" style="width: 380px; height: 250px; float: left;"></div>
    
     
     
   
      
 </div>
      
   
      
  </body>
</html>